<template>
  <el-container>
    <el-main class="main-bg">
      <el-form ref="searchForm" :model="searchForm" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="企业名称">
              <el-input
                v-model="searchForm.unit_name"
                placeholder="请输入企业名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执法人员" prop="raw_person_id">
              <el-select
                v-model="searchForm.raw_person_id"
                :loading="oneLoading"
                filterable
                placeholder="请选择执法人员"
              >
                <el-option
                  v-for="(item, index) in personOptions"
                  :key="index"
                  :label="item.codeName"
                  @click.native="handleName(item.codeName)"
                  :value="item.codeValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检查状态">
              <el-select
                v-model="searchForm.inspect_status"
                placeholder="请选择检查状态"
              >
                <el-option
                  v-for="item in PLUGINS_MET_INSPECT_STATUS"
                  :key="item.codeValue"
                  :label="item.codeName"
                  :value="item.codeValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-button
              type="primary"
              icon="iconfont iconxianxing_sousuo"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-button
              type="warning"
              icon="iconfont iconxianxing_zhongzhi"
              @click="handleReset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table
        ref="table"
        class="data-table"
        style="width: 100%"
        :current-page="page"
        :page-size="limit"
        :total="total"
        :index="false"
        :table-data="tableData"
        :header-data="tableHeader"
        :loading="loading"
        @now-page="handlePage"
        @now-size="handleSize"
        @table-sort="handleSort"
      />
    </el-main>

    <el-dialog :visible.sync="dialogVisible" width="900px" :title="unitName">
      <div class="video-flex">
        <video :src="videoUrl1" controls width="50%"></video>
        <video :src="videoUrl2" controls width="50%"></video>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import addtable from '@/mixins/addtable'
import eventType from '@/mixins/eventType'
import { getCheckCompanyList, getLawPerson } from '@/api'
export default {
  name: 'history-list',
  mixins: [addtable, eventType],
  data() {
    return {
      dialogVisible: false,
      videoUrl1: '',
      videoUrl2: '',
      unitName: '',
      searchForm: {
        unit_name: '',
        district_id: '',
        district_name: '',
        raw_person_id: '',
        raw_person_name: '',
        inspect_status: '' //已完成
      },
      detailId: '',
      tableHeader: [],
      personOptions: [],
      oneLoading: false
    }
  },
  created() {
    const _this = this
    this.tableHeader = [
      {
        prop: 'planNo',
        label: '编码',
        width: '180px',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        prop: 'unitName',
        label: '单位名称',
        sortable: false,
        overflow: true,
        width: 180,
        align: 'left'
      },
      {
        prop: 'chargePerson',
        label: '负责人',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        prop: 'linkTelephone',
        label: '联系电话',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        prop: 'unitType',
        label: '企业类型',
        sortable: false,
        align: 'left',
        render: (h, vm) => {
          const arr = _this.plugins_met_unit_type.filter((item) => {
            return vm.unitType == item.codeValue
          })
          return <span>{arr[0].codeName}</span>
        }
      },
      {
        prop: 'districtName',
        label: '所在区县',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        prop: 'rawPersonName',
        label: '执法人',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        prop: 'proofUpload',
        label: '佐证材料',
        sortable: false,
        overflow: true,
        align: 'left',
        render: (h, vm) => {
          const arr = _this.PLUGINS_MET_UPLOAD_STATUS.filter((item) => {
            return vm.proofUpload == item.codeValue
          })
          if (arr[0].codeValue != 1) {
            return <span class="text-warning">{arr[0].codeName}</span>
          } else {
            return <span class="text-success">{arr[0].codeName}</span>
          }
        }
      },
      {
        prop: 'inspectStatus',
        label: '检查状态',
        sortable: false,
        overflow: true,
        align: 'left',
        render: (h, vm) => {
          const arr = _this.PLUGINS_MET_INSPECT_STATUS.filter((item) => {
            return vm.inspectStatus == item.codeValue
          })
          return <span>{arr[0].codeName}</span>
        }
      },
      {
        prop: 'signStatus',
        label: '签名状态',
        sortable: false,
        overflow: true,
        align: 'left',
        render: (h, vm) => {
          if (!vm.signStatus || vm.signStatus === 0) {
            return <span>暂无签署流程</span>
          } else if (vm.signStatus === 1) {
            return <span class="text-warning">始化签署流程</span>
          } else if (vm.signStatus === 2) {
            return <span class="text-danger">执法签署完成</span>
          } else {
            return <span class="text-success">单位签署完成</span>
          }
        }
      },
      {
        width: 200,
        label: '操作',
        align: 'left',
        fixed: 'right',
        buttonList: (row, index) => {
          let btnArr = [
            {
              text: '签署详情',
              type: 'text',
              event: this.handleDetail
            }
          ]
          if (row.videoUrl1 && row.videoUrl2) {
            btnArr.push({
              text: '查看录播',
              type: 'text',
              className: 'text-success',
              event: this.handleVideo
            })
          }
          return btnArr
        }
      }
    ]
    this.getTableData()
  },
  mounted() {
    this.getLawPersonList()
  },
  methods: {
    handleVideo(row) {
      this.dialogVisible = true
      this.unitName = row.unitName + '视频录播'
      this.videoUrl1 = row.videoUrl1
      this.videoUrl2 = row.videoUrl2
    },
    handleDetail(row) {
      this.$router.push({
        name: 'historyDetail',
        query: {
          detailId: row.detailId
        }
      })
    },
    handleBook(row) {
      this.$router.push({
        name: 'readBookDetail',
        query: {
          detailId: row.detailId,
          route: 'historyList'
        }
      })
    },
    handleLookBook(row) {
      this.$router.push({
        name: `readBookDetail`,
        query: {
          idea_id: row.ideaId,
          route: 'historyList'
        }
      })
    },
    // 获取执法人员
    getLawPersonList() {
      getLawPerson(this.personSearch)
        .then((res) => {
          if (!res) return
          const { data } = res
          this.personOptions = data
        })
        .catch((err) => {
          console.log('TCL: getTableData -> err', err)
        })
    },
    // remoteMethod(query) {
    //   if (query !== "") {
    //     this.personSearch.q_legal_person = query
    //     this.oneLoading = true
    //     setTimeout(() => {
    //       this.oneLoading = false
    //       this.getLawPerson(this.personSearch)
    //     }, 200)
    //   } else {
    //     this.personOptions = []
    //   }
    // },
    handleName(name) {
      this.searchForm.raw_person_name = name
    },
    getTableData() {
      this.loading = true
      this.getTableParams()
      getCheckCompanyList(this.tableParams)
        .then((res) => {
          if (!res) return
          const { data, totalCount } = res
          setTimeout(() => {
            this.loading = false
            this.total = totalCount
            this.tableData = data
          }, 500)
        })
        .catch((err) => {
          console.log('TCL: getTableData -> err', err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.video-flex {
  display: flex;
  video {
    margin: 0 20px;
  }
}
</style>